<script setup lang="ts">

import {ref, computed} from "vue";
import {userPersonGuideService, userCompanyGuideService, CheckCompanyService} from "@/api/user.js";
import {ElMessage} from "element-plus";
import {useRouter} from 'vue-router'
import { ElMessageBox } from 'element-plus'
import {getJobByService} from "@/api/job.js";

//获取路由
const router = useRouter()

const userInfo = ref({
  userId: '',
  name: '',
  birthdate: '',
  degree: '',
  school: '',
  specialized: '',
  intention: '',
  skills: '',
  projects: '',
  phone: '',
  experiment: '',
  location: '',
})


const companyInfo = ref({
  companyId: '',
  name: '',
  phone: '',
  introduction: '',
  status: '',
  size: '',
  address: '',
  companyType: ''
})

const stepsForNull = [
  '用户/公司选择'
];

const stepsForUser = [
  '用户/公司选择',
  '基本信息',
  '教育背景',
  '求职意向',
  '工作资历',
  '完成引导'
];

const stepsForCompany = [
  '用户/公司选择',
  '公司基本信息',
  '公司详情',
  '完成引导'
];

const companyInfos = ref([{
  companyId: '',
  name: '',
  phone: '',
  introduction: '',
  status: '',
  size: '',
  address: '',
  companyType: ''
}])

const dialogVisible = ref(false)

const handleClose = (done: () => void) => {
  ElMessageBox.confirm('Are you sure to close this dialog?')
      .then(() => {
        done()
      })
      .catch(() => {
        // catch error
      })
}


const currentStep = ref(1);
const userType = ref('')
const showUserSelection = ref(true)
const hasSelectedUserType = ref(false);

const onUserTypeChange = (type: string) => {
  userType.value = type;
  if (type) {
    currentStep.value++;
    showUserSelection.value = false;
    hasSelectedUserType.value = true;
  }
};

// 控制步骤前进

// 新增方法：检查当前步骤的表单是否填写完整
const isCurrentStepCompleted = computed(() => {
  if (userType.value === 'user') {
    switch (currentStep.value) {
      case 2:
        return Boolean(userInfo.value.name && userInfo.value.birthdate && userInfo.value.phone);
      case 3:
        return Boolean(userInfo.value.degree && userInfo.value.school && userInfo.value.specialized);
      case 4:
        return Boolean(userInfo.value.intention && userInfo.value.skills);
      case 5:
        return Boolean(userInfo.value.experiment && userInfo.value.projects)
      default:
        return true;
    }
  }

  else {
    switch (currentStep.value) {
      case 2:
        return Boolean(companyInfo.value.name && companyInfo.value.address && companyInfo.value.status && companyInfo.value.size);
      case 3:
        return Boolean(companyInfo.value.companyType && companyInfo.value.phone && companyInfo.value.introduction);
      default:
        return true;
    }
  }
});

// 修改 proceedToNextStep 方法，以使用 isCurrentStepCompleted
const proceedToNextStep = async () => {
  //如果公司名称已存在
  let result = await CheckCompanyService(companyInfo.value.name);
  console.log(result.data)
  if (result.data.length === 0) {
    dialogVisible.value = false;
    if (isCurrentStepCompleted.value) {
      if (currentStep.value < 7) {
        currentStep.value++;
      } else {
        // 处理最后一步的逻辑，例如提交表单
        console.log('表单填写完成');
      }
    }
  }else{
    dialogVisible.value = true;
    companyInfos.value = result.data;
  }
};

const handleNextStep = async () => {
  dialogVisible.value = false;
  if (isCurrentStepCompleted.value) {
    if (currentStep.value < 7) {
      currentStep.value++;
    } else {
      // 处理最后一步的逻辑，例如提交表单
      console.log('表单填写完成');
    }
  }
}

// 求职意向

// 假设这些数据可以从API获取，这里直接定义为静态数据
const industries = [
  { id: 1, name: '后端' },
  { id: 2, name: '前端' },
  { id: 3, name: '算法' },
];
const subCareers = ref([]);

const selectedIndustry = ref(null);
const selectedSubCareer = ref(null);
const showJobIntentDialog = ref(false);

const fetchSubCareers = () => {
  // 模拟根据行业ID获取子职业列表
  if (selectedIndustry.value) {
    // 这里应该是调用API获取子职业列表，简化为直接设定
    subCareers.value = [
      { id: 11, name: 'java', industryId: 1 },
      { id: 12, name: 'C', industryId: 1 },
      { id: 21, name: '前端工程师', industryId: 2 },
      { id: 31, name: '算法工程师', industryId: 3 },

    ].filter(subCareer => subCareer.industryId === selectedIndustry.value);
  } else {
    subCareers.value = [];
  }
};

const tempJobIntention = ref('');

const displayedJobIntention = ref(null);

const confirmJobIntent = () => {
  let intentionText = '';
  if (selectedIndustry.value && selectedSubCareer.value) {
    intentionText = `${industries.find(ind => ind.id === selectedIndustry.value)?.name}-${subCareers.value.find(sub => sub.id === selectedSubCareer.value)?.name}`;
  }
  tempJobIntention.value = intentionText;
  userInfo.value.intention = intentionText;
  displayedJobIntention.value = intentionText; // 更新显示的求职意向
  showJobIntentDialog.value = false;

  console.log('已选择的求职意向:', intentionText);
};


const phoneError = ref(false);

const validatePhone = (value) => {
  const cleanedValue = value.replace(/\D/g, ''); // 移除非数字字符
  if (cleanedValue.length !== 11) {
    phoneError.value = true;
  } else {
    phoneError.value = false;
    userInfo.value.phone = cleanedValue;
  }
};

//返回首页并且将数据显示在简历里面
async function goToHomePage(){
  console.log(userInfo.value.name)
  if(userInfo.value.name !== ""){
    //如果是个人用户引导
    await userPersonGuideService(userInfo.value);
    ElMessage.success("欢迎使用我们的简历系统")
    //跳转路由
    router.push("/JobList")
  }
  else{
    //如果是企业用户引导
    console.log(companyInfo.value)
    await userCompanyGuideService(companyInfo.value);
    ElMessage.success("欢迎使用我们的简历系统")
    //跳转路由
    router.push("/JobList")
  }

}

</script>

<template>
  <!-- Start Preloader Area -->
  <div class="preloader">
    <div class="lds-ripple">
      <div></div>
      <div></div>
    </div>
  </div>
  <!-- End Preloader Area -->

  <!-- Start Header Area -->
  <header class="header-area">
    <!-- Start Top Header -->
    <div class="top-header">
      <div class="container">
        <div class="row align-items-center">
          <div class="col-lg-6 col-md-6">
            <ul class="header-left-content">
              <li>
                <span>铸职</span>
                <a href="tel:+1-(514)-312-5678">智能求职平台</a>
              </li>
            </ul>
          </div>

          <div class="col-lg-6 col-md-6">
            <div class="header-right-content">
              <ul class="log-in" v-if="userInfo.value === ''">
                <li>
                  <a href="log-in-register.html">
                    <i class="bx bxs-lock"></i>
                    登录
                  </a>
                </li>

                <li>
                  <a href="log-in-register.html">
                    <i class="bx bxs-user"></i>
                    注册
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- Start Top Header -->

    <!-- Start Navbar Area -->
    <div class="navbar-area">
      <div class="mobile-nav">
        <div class="container">
          <div class="mobile-menu">
            <div class="logo">
              <a href="index.html">
                <img src="@/assets/images/logo.png" alt="logo">
              </a>
            </div>
          </div>
        </div>
      </div>

      <div class="desktop-nav">
        <div class="container">
          <nav class="navbar navbar-expand-md navbar-light">
            <a class="navbar-brand" href="index.html">
              <img src="@/assets/images/logo.png" alt="logo">
            </a>

            <div class="collapse navbar-collapse mean-menu">
              <ul class="navbar-nav m-auto">
                <li class="nav-item">
                  <a href="" class="nav-link" @click="router.push('/HomePage')">
                    首页
                  </a>

                </li>

                <li class="nav-item">
                  <a href="" class="nav-link" v-if="userInfo.status === 0" @click="router.push('/RecommendJobPage')">
                    工作推荐
                  </a>
                  <a href="" class="nav-link" v-if="userInfo.status === 1" @click="router.push('/RecommendResumePage')">
                    简历推荐
                  </a>
                </li>

                <li class="nav-item">
                  <a href="" class="nav-link" @click="router.push('/JobList')">
                    搜索
                  </a>
                </li>

                <li class="nav-item">
                  <a href="" class="nav-link active" v-if="userInfo.status === 0" @click="router.push('/UserPersonalPage')">
                    个人页面
                  </a>
                  <a href="" class="nav-link active" v-if="userInfo.status === 1" @click="router.push('/CompanyPersonalPage')">
                    个人页面
                  </a>
                </li>

                <li class="nav-item">
                  <a href="#" class="nav-link" @click="router.push('/test')">
                    分析
                  </a>
                </li>

              </ul>

              <div class="others-option">
                <div class="get-quote">
                  <a href="" class="default-btn" v-if="userInfo.status === 0" @click="router.push('/UserPersonalPage')">
                    写简历
                  </a>
                  <a href="#" class="default-btn" v-if="userInfo.status === 1" @click="router.push('/recruitTest')">
                    发布职位
                  </a>
                </div>
              </div>
            </div>
          </nav>
        </div>
      </div>

      <div class="others-option-for-responsive">
        <div class="container">
          <div class="dot-menu">
            <div class="inner">
              <div class="circle circle-one"></div>
              <div class="circle circle-two"></div>
              <div class="circle circle-three"></div>
            </div>
          </div>

          <div class="container">
            <div class="option-inner">
              <div class="others-option justify-content-center d-flex align-items-center">
                <div class="get-quote">
                  <a href="post-job.html" class="default-btn">
                    写简历
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- End Navbar Area -->
  </header>
  <!-- End Header Area -->

  <!-- Start Page Title Area -->
  <div class="page-title-area">
    <div class="container">
      <div class="page-title-content">
        <h2>引导页面</h2>
        <ul>
          <li>
            <a href="index.html">
              首页
            </a>
          </li>
          <li class="active">引导页面</li>
        </ul>
      </div>
    </div>
  </div>
  <!-- End Page Title Area -->

  <!-- Start Candidates Job Information Area -->
  <section class="job-information-area ptb-100">
    <div class="container">
      <div class="job-information">
        <el-steps :active="currentStep" align-center>
          <el-step
              v-for="(step, index) in userType === 'company' ? stepsForCompany: stepsForUser"
              :key="index"
              :title="step"
          ></el-step>
        </el-steps>

        <div v-if="showUserSelection" class="selection-container">
          <h2>请选择身份</h2>
          <div class="button-group">
            <el-button
                type="primary"
                plain
                @click="onUserTypeChange('user')"
                class="custom-button user-button"
            >
              <span class="button-text">用户</span>
            </el-button>
            <el-button
                type="primary"
                plain
                @click="onUserTypeChange('company')"
                class="custom-button company-button"
            >
              <span class="button-text">公司</span>
            </el-button>
          </div>
        </div>

        <div v-else>
          <div v-if="userType === 'user'" class="selection-container">
            <h2>请输入您的信息</h2>

            <el-form label-position="top" v-if="currentStep === 2">
              <el-form-item label="姓名">
                <el-input v-model="userInfo.name" class="input-standard"></el-input>
              </el-form-item>

              <el-form-item label="年龄">
                <div class="block">
                  <span class="demonstration"></span>
                  <el-date-picker
                      v-model="userInfo.birthdate"
                      type="date"
                      placeholder="选择日期"
                      class="input-standard"
                  >
                  </el-date-picker>
                </div>
              </el-form-item>

              <el-form-item label="联系电话" class="relative-position">
                <el-input
                    v-model.trim="userInfo.phone"
                    @input="validatePhone"
                    :class="{ 'is-error': phoneError }"
                    class="input-standard"
                ></el-input>
                <p v-if="phoneError" class="error-message">电话号码必须为11位数字。</p>
              </el-form-item>

              <div class="button-wrapper">
                <el-button type="primary" @click="handleNextStep" :disabled="!isCurrentStepCompleted"
                           class="next-button">下一步
                </el-button>
              </div>
            </el-form>

            <el-form label-position="top" v-if="currentStep === 3">
              <el-form-item label="学历">
                <el-select v-model="userInfo.degree" placeholder="请选择学历" class="select-standard">
                  <el-option label="博士" value="博士"></el-option>
                  <el-option label="硕士" value="硕士"></el-option>
                  <el-option label="本科" value="本科"></el-option>
                  <el-option label="大专" value="大专"></el-option>
                  <el-option label="中专" value="高中"></el-option>
                  <el-option label="高中" value="中专/中技"></el-option>
                  <el-option label="初中" value="初中及以下"></el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="学校">
                <el-input v-model="userInfo.school" class="input-standard"></el-input>
              </el-form-item>

              <el-form-item label="专业名称">
                <el-input v-model="userInfo.specialized" class="input-standard"></el-input>
              </el-form-item>

              <div class="button-wrapper">
                <el-button type="primary" @click="handleNextStep" :disabled="!isCurrentStepCompleted"
                           class="next-button">下一步
                </el-button>
              </div>
            </el-form>


            <el-form label-position="top" v-if="currentStep === 4">

              <el-form-item label="求职意向" class="intention-form">
                <span>{{ displayedJobIntention || '请选择求职意向' }}</span>
                <el-button type="text" @click="showJobIntentDialog = true">选择求职意向</el-button>
              </el-form-item>

              <el-dialog
                  v-model="showJobIntentDialog"
                  title="选择求职意向"
                  width="40%"
              >
                <template #header>
                  <div class="dialog-header">
                    <span>行业</span>
                    <span>具体岗位</span>
                  </div>
                </template>
                <template #default>
                  <div class="dialog-body">
                    <el-select v-model="selectedIndustry" placeholder="请选择行业" @change="fetchSubCareers">
                      <el-option
                          v-for="industry in industries"
                          :key="industry.id"
                          :label="industry.name"
                          :value="industry.id"
                      ></el-option>
                    </el-select>
                    <el-select v-model="selectedSubCareer" placeholder="请选择具体岗位" :disabled="!selectedIndustry">
                      <el-option
                          v-for="subCareer in subCareers"
                          :key="subCareer.id"
                          :label="subCareer.name"
                          :value="subCareer.id"
                      ></el-option>
                    </el-select>
                  </div>
                </template>
                <template #footer>
      <span class="dialog-footer">
        <el-button @click="showJobIntentDialog = false">取消</el-button>
        <el-button type="primary" :disabled="!selectedSubCareer" @click="confirmJobIntent">确定</el-button>
      </span>
                </template>
              </el-dialog>

              <el-form-item label="意向城市">
                <el-input v-model="userInfo.location" class="input-standard"></el-input>
              </el-form-item>

              <el-form-item label="专业技能">
                <el-input
                    v-model="userInfo.skills"
                    type="textarea"
                    :autosize="{ minRows: 5, maxRows: 100 }"
                    placeholder="请输入专业技能"
                    style="width: 400px; height: 100px"
                    class="input-standard"
                ></el-input>
              </el-form-item>

              <div class="button-wrapper">
                <el-button type="primary" @click="handleNextStep" :disabled="!isCurrentStepCompleted"
                           class="next-button">完成
                </el-button>
              </div>
            </el-form>


            <el-form label-position="top" v-if="currentStep === 5">

              <el-form-item label="工作资历">
                <el-select v-model="userInfo.experiment" placeholder="请选择资历" class="select-standard">
                  <el-option label="经验不限" value="不限"></el-option>
                  <el-option label="1年" value="1"></el-option>
                  <el-option label="3年" value="3"></el-option>
                  <el-option label="5年" value="5"></el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="项目经历">
                <el-input
                    v-model="userInfo.projects"
                    type="textarea"
                    :autosize="{ minRows: 5, maxRows: 100 }"
                    placeholder="请输入项目经历"
                    style="width: 400px; height: 100px"
                    class="textarea-standard"
                ></el-input>
              </el-form-item>

              <div class="button-wrapper">
                <el-button type="primary" @click="handleNextStep" :disabled="!isCurrentStepCompleted"
                           class="next-button">下一步
                </el-button>
              </div>

            </el-form>

            <el-form label-position="top" v-if="currentStep === 6" class="completion-form">
              <div class="completion-message">
                <img src="@/assets/images/oneself-image/勾.png" alt="完成图标" class="checkmark-icon" />
                <h3>恭喜！信息填写已完成</h3>
                <p>您的信息已成功保存。现在，您可以开始探索更多机会了。</p>
              </div>
              <el-button type="primary" @click="goToHomePage" class="home-button">
                <i class="el-icon-home"></i> 返回首页
              </el-button>
            </el-form>
          </div>


          <div v-else-if="userType === 'company'" class="selection-container">
            <h2>请输入公司信息</h2>
            <el-form label-position="top" v-if="currentStep === 2">

              <el-form-item label="公司名称">
                <el-input v-model="companyInfo.name" class="input-standard"></el-input>
              </el-form-item>
              <el-form-item label="公司地址">
                <el-input v-model="companyInfo.address" class="input-standard"></el-input>
              </el-form-item>

              <el-form-item label="融资情况">
                <el-select v-model="companyInfo.status" placeholder="请选择融资情况">
                  <el-option label="已融资" value="已融资"></el-option>
                  <el-option label="未融资" value="未融资"></el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="公司规模">
                <el-select v-model="companyInfo.size" placeholder="请选择公司规模">
                  <el-option label="1~20人" value="0~20人"></el-option>
                  <el-option label="20~100人" value="20~100人"></el-option>
                  <el-option label="100~500人" value="100~500人"></el-option>
                  <el-option label="500~2000人" value="500~2000人"></el-option>
                  <el-option label="2000~10000人" value="2000~10000人"></el-option>
                  <el-option label="10000人以上" value="10000人以上"></el-option>
                </el-select>
              </el-form-item>

              <div class="button-wrapper">
                <el-button type="primary" @click="proceedToNextStep" :disabled="!isCurrentStepCompleted"
                           class="next-button">下一步
                </el-button>
              </div>

              <el-dialog
                  v-for="com in companyInfos"
                  v-model="dialogVisible"
                  title="提示"
                  width="500"
                  :before-close="handleClose"
              >
                <span>公司名称{{com.name}}已存在，并且地址为：{{com.address}}</span>
                <template #footer>
                  <div class="dialog-footer">
                    <el-button @click="handleNextStep">继续填写</el-button>
                    <el-button type="primary" @click="router.push('/JobList')">
                      就是我的公司
                    </el-button>
                  </div>
                </template>
              </el-dialog>


            </el-form>

            <el-form label-position="top" v-if="currentStep === 3">
              <el-form-item label="公司行业">
                <el-input v-model="companyInfo.companyType" class="input-standard"></el-input>
              </el-form-item>
              <el-form-item label="联系电话">
                <el-input v-model="companyInfo.phone" class="input-standard"></el-input>
              </el-form-item>
              <el-form-item label="公司简介">
                <el-input
                    v-model="companyInfo.introduction"
                    type="textarea"
                    :autosize="{ minRows: 5, maxRows: 100 }"
                    placeholder="请输入公司简介"
                    style="width: 400px; height: 100px"
                    class="textarea-standard"
                ></el-input>
              </el-form-item>

              <div class="button-wrapper">
                <el-button type="primary" @click="handleNextStep" :disabled="!isCurrentStepCompleted"
                           class="next-button">下一步
                </el-button>
              </div>
            </el-form>

            <el-form label-position="top" v-if="currentStep === 4" class="completion-form">
              <div class="completion-message">
                <img src="@/assets/images/oneself-image/勾.png" alt="完成图标" class="checkmark-icon" />
                <h3>恭喜！信息填写已完成</h3>
                <p>您的信息已成功保存。现在，您可以开始探索更多机会了。</p>
              </div>
              <el-button type="primary" @click="goToHomePage" class="home-button">
                <i class="el-icon-home"></i> 返回首页
              </el-button>
            </el-form>
          </div>
        </div>
      </div>
    </div>
  </section>
  <!-- End Subscribe Area -->

  <section class="subscribe-area subscribe-area-about-page">
    <div class="container">
      <div class="subscribe-bg">
        <div class="row align-items-center">
          <div class="col-lg-6">
            <div class="subscribe-content">
              <h2>找工作，一站解决</h2>
            </div>
          </div>

        </div>
      </div>
    </div>
  </section>
  <!-- End Subscribe Area -->

  <!-- Start Footer Area -->
  <footer class="footer-area pt-100 pb-70">
    <div class="container">
      <div class="row">
        <div class="col-lg-3 col-md-6">
          <div class="single-footer-widget single-bg">
            <a href="index.html" class="logo">
              <img src="@/assets/images/logo.png" alt="Image">
            </a>

            <p>Lorem ipsum dolor sit amet, consec tetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
              dolore magna aliqua consec tetur.</p>

            <ul class="social-icon">
              <li>
                <a href="#">
                  <i class="bx bxl-facebook"></i>
                </a>
              </li>
              <li>
                <a href="#">
                  <i class="bx bxl-instagram"></i>
                </a>
              </li>
              <li>
                <a href="#">
                  <i class="bx bxl-linkedin-square"></i>
                </a>
              </li>
              <li>
                <a href="#">
                  <i class="bx bxl-twitter"></i>
                </a>
              </li>
            </ul>
          </div>
        </div>

        <div class="col-lg-3 col-md-6">
          <div class="single-footer-widget">
            <h3>Contact</h3>

            <ul class="address">
              <li>
                <i class="bx bx-phone-call"></i>
                <span>Phone:</span>
                <a href="tel:+1-(514)-7939-357">+1 (514) 7939-357</a>
              </li>
              <li>
                <i class="bx bx-envelope"></i>
                <span>Email:</span>
                <a href="mailto:hello@jubi.com">hello@jubi.com</a>
              </li>
              <li class="location">
                <i class="bx bx-location-plus"></i>
                <span>Address:</span>
                6890 Blvd, The Bronx, NY 1058 New York, USA
              </li>
            </ul>
          </div>
        </div>

        <div class="col-lg-3 col-md-6">
          <div class="single-footer-widget">
            <h3>Helpful Resources</h3>

            <ul class="import-link">
              <li>
                <a href="#">Create Account</a>
              </li>
              <li>
                <a href="#">Contact Us</a>
              </li>
              <li>
                <a href="#">Site Map</a>
              </li>
              <li>
                <a href="#">Terms of Use</a>
              </li>
              <li>
                <a href="#">Privacy Centre</a>
              </li>
              <li>
                <a href="#">Blog</a>
              </li>
            </ul>
          </div>
        </div>

        <div class="col-lg-3 col-md-6">
          <div class="single-footer-widget">
            <h3>Job Seekers</h3>

            <ul class="import-link">
              <li>
                <a href="#">Create Account</a>
              </li>
              <li>
                <a href="#">Browse Jobs</a>
              </li>
              <li>
                <a href="#">Upload CV</a>
              </li>
              <li>
                <a href="#">Company Profile</a>
              </li>
              <li>
                <a href="#">International Jobs</a>
              </li>
              <li>
                <a href="#">FAQ</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </footer>
  <!-- End Footer Area -->

  <!-- Start Copy Right Area -->
  <div class="copy-right-area">
    <div class="container">
      <p>Copyright &copy; 2021.Company name All rights reserved.<a target="_blank" href="https://sc.chinaz.com/moban/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a>
      </p>
    </div>
  </div>
  <!-- End Copy Right Area -->

  <!-- Start Go Top Area -->
  <div class="go-top">
    <i class="bx bx-chevrons-up"></i>
    <i class="bx bx-chevrons-up"></i>
  </div>
  <!-- End Go Top Area -->
</template>

<style scoped>

@import "@/assets/css/bootstrap.min.css";
@import "@/assets/css/owl.theme.default.min.css";
@import "@/assets/css/owl.carousel.min.css";
/*@import "@/assets/css/animate.min.css";*/
@import "@/assets/css/boxicons.min.css";
@import "@/assets/css/magnific-popup.min.css";
@import "@/assets/css/flaticon.css";
@import "@/assets/css/meanmenu.min.css";
@import "@/assets/css/nice-select.min.css";
@import "@/assets/css/odometer.min.css";
@import "@/assets/css/date-picker.min.css";
@import "@/assets/css/muli-fonts.css";
@import "@/assets/css/style2.css";
@import "@/assets/css/responsive2.css";
@import "@/assets/css/guidepage.css";

.selection-container {
  /* 使用Flex布局进行水平和垂直居中 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* 为了更好地视觉效果，可以增加一些间距 */
  margin-top: 50px;
}

.form-container {
  display: flex; /* 使用Flex布局 */
  flex-direction: column; /* 默认列布局 */
}

.button-wrapper {
  display: flex; /* 在按钮的直接容器上使用Flex布局 */
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中，如果有多行内容或特定高度的需求，这可能需要调整 */
  margin-top: auto; /* 自动撑满剩余空间，使按钮位于底部 */
}

.next-button {
  width: 100%; /* 根据需要调整宽度，这里设置为全宽 */
  max-width: 600px; /* 设置最大宽度以适应不同屏幕 */
  padding: 12px 24px; /* 调整按钮的内边距以改变大小 */
  font-size: 16px; /* 调整字体大小 */
  border-radius: 24px; /* 增加圆角使按钮更圆润 */
  background-color: #007bff; /* 更改背景颜色 */
  color: #fff; /* 文本颜色 */
  box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08); /* 添加阴影效果 */
  transition: all 0.3s ease; /* 添加过渡动画 */
}

.next-button:hover {
  background-color: #0056b3; /* 鼠标悬停时的背景色变化 */
  transform: translateY(-2px); /* 微小的上升效果 */
  box-shadow: 0 7px 14px rgba(50, 50, 93, 0.1), 0 3px 6px rgba(0, 0, 0, 0.08); /* 阴影增强 */
  cursor: pointer; /* 显示指针 */
}

.custom-button:hover {
  background-color: #0056b3; /* 鼠标悬停时的背景色变化 */
  transform: translateY(-2px); /* 微小的上升效果 */
  box-shadow: 0 7px 14px rgba(50, 50, 93, 0.1), 0 3px 6px rgba(0, 0, 0, 0.08); /* 阴影增强 */
  cursor: pointer; /* 显示指针 */
}

.selection-container {
  text-align: center; /* 居中标题 */
}

.button-group {
  display: flex;
  justify-content: center;
  gap: 10px; /* 控制按钮间的间距 */
}

.custom-button {
  width: 150px; /* 设置按钮宽度 */
  height: 80px; /* 设置按钮高度 */
  font-size: 20px; /* 调整按钮文字大小 */
  border-radius: 10px; /* 圆角效果 */
  display: flex;
  justify-content: center;
  align-items: center; /* 垂直居中文本 */
  transition: all 0.3s; /* 添加过渡效果 */
}

.user-button {
  background-color: #f0f7ff; /* 用户按钮背景色 */
  color: #409eff; /* 文字颜色 */
}

.company-button {
  background-color: #f5f5f5; /* 公司按钮背景色 */
  color: #606266; /* 文字颜色 */
}

/* 鼠标悬停时的效果 */
.custom-button:hover {
  opacity: 0.8;
}

.button-text {
  white-space: nowrap; /* 防止文本换行 */
}

.wide-input {
  width: 500px !important; /* 使用!important确保覆盖默认样式 */
  height: 300px;
}

.input-standard {
  width: 220px !important; /* 根据需要调整宽度 */
}

/* 可能还需要为特定组件定义，比如针对el-select */
.select-standard {
  width: 220px !important;
}

/* 如果需要固定高度，例如对于textarea */
.textarea-standard {
  width: 220px !important;
  height: 100px !important;
}

.error-message {
  color: red; /* 根据需要调整颜色 */
  font-size: 12px; /* 调整字体大小 */
  margin-top: 30px; /* 给错误信息与输入框之间留出一点空间 */
  position: absolute; /* 使用绝对定位 */
  left: 0; /* 将错误信息定位到输入框左侧 */
  top: 100%; /* 让错误信息出现在输入框下方 */
  transform: translateY(-100%); /* 微调位置，使其刚好在输入框下方 */

}

.relative-position {
  position: relative; /* 使该元素成为相对定位的容器 */
  margin-bottom: 35px;
}

.intention-form span{
  margin-right: 10px;
}
</style>